<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="720px"
    top="40px"
  >
    <el-form :model="data" :rules="rules" labelPosition="top" ref="form" class="custom-form">
      <el-form-item label="等级名称:" prop="code">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input v-model="data.code" placeholder="请输入等级名称"></el-input>
          </el-col>
          <el-col :span="14">
            <span>输入等级名称，尽量保证等级名称不要重复</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="起始分值:" prop="points">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input-number :min="0" style="width: 100%" v-model="data.points"
                             placeholder="请输入起始的分值"></el-input-number>
          </el-col>
          <el-col :span="14">
            该等级的起始分值，1元消费等于1个积分。
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="优惠比例:" prop="discounts">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input-number :min="0" :max="100" v-model="data.discounts" placeholder="请输入优惠的百分比"></el-input-number>
            %
          </el-col>
          <el-col :span="14">
            请输入该等级用户的优惠百分比
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="运费优惠:" prop="discounts">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-radio v-model="data.freight" :label="1">优惠</el-radio>
            <el-radio v-model="data.freight" :label="0">不优惠</el-radio>
          </el-col>
          <el-col :span="14">
            确定在计算商品优惠的时候是否包含运费的优惠
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="说明:">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input type="textarea" v-model="data.note" placeholder="请输入说明信息"></el-input>
          </el-col>
          <el-col :span="14">
            请输入该等级的描述信息
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="submitForm"><span v-if="data.id!=null">编辑</span> <span v-else>添加</span>
      </el-button>
      <el-button @click="closed">关闭</el-button>
    </div>
  </el-dialog>

</template>
<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import AdminService from 'src/service/admin'

  export default {
    name: 'HAdminGradeEdit',
    mixins: [Dialog],
    data() {
      return {
        data: {
          id: null,
          code: '',
          points: 0,
          discounts: 0,
          freight: 0,
          note: ''
        },
        rules: {
          code: [
            {required: true, message: '请输入等级名称', trigger: 'blur'},
            {min: 2, message: '最少2个字符', trigger: 'blur'}
          ],
          points: [
            {required: true, message: '请输入起始的分值', trigger: 'change'}
          ],
          discounts: [
            {required: true, message: '请输入优惠的百分比', trigger: 'change'}
          ]
        }
      }
    },
    watch: {
      value: function (c, o) {
        if (c != null) {
          this.data = c
        } else {
          this.data = {
            id: null,
            code: '',
            points: 0,
            discounts: 0,
            freight: 0,
            note: ''
          }
        }
      }
    },
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    methods: {
      submitForm: function () {
        const me = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            AdminService.saveGrade(me.data).then(ds => {
              let messgae = ''
              if (me.data.id == null) {
                messgae = '添加'
              } else {
                messgae = '更新'
              }
              if (ds != null) {
                me.$message.success(messgae + '成功.')
                me.$emit('success', ds.datas[0])
              } else {
                me.$message.error(ds.message)
              }

            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
